﻿@model OrderCourseViewModel
@{
    ViewData["Title"] = "我的课程";
    var payedCourses = Model.Bookings.Where(r => r.Status == 1).ToList();
    var needPayCourses = Model.Bookings.Where(r => r.Status == 0).ToList();
}

@section Styles{
    <style>
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: #ffffff;
        }
        .course-td {
            display: table-cell;
            vertical-align: middle !important;
        }

        .table thead td {
            border-top-width: 0px;
        }
    </style>
   
    }
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-xl-12 col-xs-12 col-sm-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">我的课程</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h6 class="page-title">我的课程</h6>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-xl-12 col-xs-12 col-sm-12">
            <div class="card-box">
                <ul class="nav nav-tabs nav-bordered">
                    <li class="nav-item">
                        <a href="#course-order-all" data-toggle="tab" aria-expanded="true" class="nav-link active">
                            全部课程
                        </a>
                    </li>
                    @*<li class="nav-item">
                        <a href="#course-order-needpay" data-toggle="tab" aria-expanded="false" class="nav-link">
                            未支付
                        </a>
                    </li>*@
                    <li class="nav-item">
                        <a href="#course-order-waiting" data-toggle="tab" aria-expanded="false" class="nav-link">
                            未开始
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#course-order-teaching" data-toggle="tab" aria-expanded="false" class="nav-link">
                            授课中
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#course-order-done" data-toggle="tab" aria-expanded="false" class="nav-link">
                            已结课
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show active" id="course-order-all">
                        <div class="col-12">
                          
                                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                                    <table class="table table-small-font table-striped" id="datatable">
                                        <thead>
                                            <tr>
                                                <td>课程介绍</td>
                                                <td>授课老师</td>
                                                <td>课时总数</td>
                                                <td>时间</td>
                                                <td>价格</td>
                                                <td>状态</td>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model.Bookings)
                                            {
                                                <tr>
                                                    <td>
                                                        <div class="media mb-2">
                                                            <img class="d-flex mr-3 mt-1  avatar-lg" src="@item.TeachingPlan.Course.CoverPictureURL" alt="Generic placeholder image">
                                                            <div class="media-body ">
                                                                <h4 class="mt-1 mb-1">@item.TeachingPlan.Course.Title</h4>
                                                                <h5 class="text-muted course-title">@item.TeachingPlan.Course.SubTitle</h5>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="course-td">@item.TeachingPlan.Teacher.FullName</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Lessons.Count</td>
                                                    <td class="course-td">起 @item.TeachingPlan.BeginTime.ToString("yyyy-MM-dd") <br /> 止 @item.TeachingPlan.EndTime.ToString("yyyy-MM-dd")</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Price</td>
                                                    <td class="course-td">@StudentHelper.GetInstance().GetLessonStatus(item.Status, item.TeachingPlan.BeginTime, item.TeachingPlan.EndTime)</td>

                                                </tr>
                                            }

                                        </tbody>
                                    </table>
                                </div>
                            
                        </div>
                    </div>

                    <div class="tab-pane" id="course-order-needpay">
                        <!--未支付-->
                        <div class="col-12">
                            
                                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                                    <table class="table table-small-font table-striped" id="datatable">
                                        <thead>
                                            <tr>
                                                <td>课程介绍</td>
                                                <td>授课老师</td>
                                                <td>课时总数</td>
                                                <td>起止时间</td>
                                                <td>金额</td>
                                                <td>状态</td>
                                                <td></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model.NeedPay)
                                            {
                                            <tr>
                                                <td>
                                                    <div class="media mb-2">
                                                        <img class="d-flex mr-3 mt-1  avatar-lg" src="@item.TeachingPlan.Course.CoverPictureURL" alt="Generic placeholder image">
                                                        <div class="media-body ">
                                                            <h4 class="mt-1 mb-1">@item.TeachingPlan.Course.Title</h4>
                                                            <h5 class="text-muted course-title">@item.TeachingPlan.Course.SubTitle</h5>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="course-td">@item.TeachingPlan.Teacher.FullName</td>
                                                <td class="course-td">@item.TeachingPlan.Course.Lessons.Count</td>
                                                <td class="course-td">起 @item.TeachingPlan.BeginTime.ToString("yyyy-MM-dd") <br /> 止 @item.TeachingPlan.EndTime.ToString("yyyy-MM-dd")</td>
                                                <td class="course-td">@item.TeachingPlan.Course.Price</td>
                                                <td class="course-td">@StudentHelper.GetInstance().GetLessonStatus(item.Status, item.TeachingPlan.BeginTime, item.TeachingPlan.EndTime)</td>
                                                <td class="course-td"><button class="btn btn-danger btn-rounded " onclick="payBooking(@item.Id)"><i class='mdi mdi-delete-forever  vertical-middle'></i> 删除</button></td>
                                            </tr>
                                            }

                                        </tbody>
                                    </table>
                                </div>
                            
                        </div>
                    </div>


                    <div class="tab-pane" id="course-order-waiting">
                        <!--待授课-->
                        <div class="col-12">
                     
                                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                                    <table class="table table-small-font table-striped" id="datatable">
                                        <thead>
                                            <tr>
                                                <td>课程介绍</td>
                                                <td>授课老师</td>
                                                <td>课时总数</td>
                                                <td>起止时间</td>
                                                <td>金额</td>
                                                <td>状态</td>
                                                <td></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model.PreTeachings)
                                            {
                                                <tr>
                                                    <td>
                                                        <div class="media mb-2">
                                                            <img class="d-flex mr-3 mt-1  avatar-lg" src="@item.TeachingPlan.Course.CoverPictureURL" alt="Generic placeholder image">
                                                            <div class="media-body ">
                                                                <h4 class="mt-1 mb-1">@item.TeachingPlan.Course.Title</h4>
                                                                <h5 class="text-muted course-title">@item.TeachingPlan.Course.SubTitle</h5>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="course-td">@item.TeachingPlan.Teacher.FullName</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Lessons.Count</td>
                                                    <td class="course-td">起 @item.TeachingPlan.BeginTime.ToString("yyyy-MM-dd") <br /> 止 @item.TeachingPlan.EndTime.ToString("yyyy-MM-dd")</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Price</td>
                                                    <td class="course-td">@StudentHelper.GetInstance().GetLessonStatus(item.Status, item.TeachingPlan.BeginTime, item.TeachingPlan.EndTime)</td>
                                                    <td class="course-td"><button class="btn btn-danger btn-rounded " onclick="showDetail(@item.TeachingPlan.Course.Id)"><i class='mdi mdi mdi-eye-check  vertical-middle'></i> 详情</button></td>
                                                </tr>
                                            }

                                        </tbody>
                                    </table>
                                </div>
                            
                        </div>
                    </div>
                    <div class="tab-pane" id="course-order-teaching">
                        <!--授课中-->
                        <div class="col-12">
                     
                                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                                    <table class="table table-small-font table-striped" id="datatable">
                                        <thead>
                                            <tr>
                                                <td>课程介绍</td>
                                                <td>授课老师</td>
                                                <td>课时总数</td>
                                                <td>起止时间</td>
                                                <td>金额</td>
                                                <td>状态</td>
                                                <td></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model.Teachings)
                                            {
                                                <tr>
                                                    <td>
                                                        <div class="media mb-2">
                                                            <img class="d-flex mr-3 mt-1  avatar-lg" src="@item.TeachingPlan.Course.CoverPictureURL" alt="Generic placeholder image">
                                                            <div class="media-body ">
                                                                <h4 class="mt-1 mb-1">@item.TeachingPlan.Course.Title</h4>
                                                                <h5 class="text-muted course-title">@item.TeachingPlan.Course.SubTitle</h5>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="course-td">@item.TeachingPlan.Teacher.FullName</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Lessons.Count</td>
                                                    <td class="course-td">起 @item.TeachingPlan.BeginTime.ToString("yyyy-MM-dd") <br /> 止 @item.TeachingPlan.EndTime.ToString("yyyy-MM-dd")</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Price</td>
                                                    <td class="course-td">@StudentHelper.GetInstance().GetLessonStatus(item.Status, item.TeachingPlan.BeginTime, item.TeachingPlan.EndTime)</td>
                                                    <td class="course-td"><button class="btn btn-danger btn-rounded " onclick="showDetail(@item.TeachingPlan.Course.Id)"><i class='mdi mdi mdi-eye-check  vertical-middle'></i> 详情</button></td>
                                                </tr>
                                            }

                                        </tbody>
                                    </table>
                                </div>
                            
                        </div>
                    </div>

                    <div class="tab-pane" id="course-order-done">
                        <!--已结课,可以添加评价-->
                        <div class="col-12">
                      
                                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                                    <table class="table table-small-font table-striped" id="datatable">
                                        <thead>
                                            <tr>
                                                <td>课程介绍</td>
                                                <td>授课老师</td>
                                                <td>课时总数</td>
                                                <td>起止时间</td>
                                                <td>金额</td>
                                                <td>状态</td>
                                                <td></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model.TeachDone)
                                            {
                                                <tr>
                                                    <td>
                                                        <div class="media mb-2">
                                                            <img class="d-flex mr-3 mt-1  avatar-lg" src="@item.TeachingPlan.Course.CoverPictureURL" alt="Generic placeholder image">
                                                            <div class="media-body ">
                                                                <h4 class="mt-1 mb-1">@item.TeachingPlan.Course.Title</h4>
                                                                <h5 class="text-muted course-title">@item.TeachingPlan.Course.SubTitle</h5>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="course-td">@item.TeachingPlan.Teacher.FullName</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Lessons.Count</td>
                                                    <td class="course-td">起 @item.TeachingPlan.BeginTime.ToString("yyyy-MM-dd") <br /> 止 @item.TeachingPlan.EndTime.ToString("yyyy-MM-dd")</td>
                                                    <td class="course-td">@item.TeachingPlan.Course.Price</td>
                                                    <td class="course-td">@StudentHelper.GetInstance().GetLessonStatus(item.Status, item.TeachingPlan.BeginTime, item.TeachingPlan.EndTime)</td>
                                                    <td class="course-td"><button class="btn btn-danger btn-rounded " onclick="showDetail(@item.TeachingPlan.Course.Id)"><i class='mdi mdi mdi-eye-check  vertical-middle'></i> 详情</button>
                                                    <button class="btn btn-danger btn-rounded" onclick="ShowPopup('/Order/AddEvaluation?id=@StudentHelper.GetInstance().GetEvluationId(User.GetUserID(),item.TeachingPlanId,Model.TeachingEvaluationViewModels)&teachplanId=@item.TeachingPlanId')"><i class='mdi mdi-thumb-up  vertical-middle'></i> 评价</button></td>
                                                </tr>
                                            }

                                        </tbody>
                                    </table>
                                </div>
                        
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->
@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")


    @*<script src="~/assets/libs/moment/moment.min.js"></script>*@

<script>
        function ShowPopup(url) {
            var modalId = 'modalDefault';
            var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');
            var new_url = url;
            $.get(new_url)
                .done(function (response) {
                    modalPlaceholder.html(response);
                    popup = $('#' + modalId + '').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                });
        }
        //function deleteBooking(id) {

        //    Swal.fire({
        //        title: "删除",
        //        text: "确定删除?",
        //        type: "warning",
        //        showCancelButton: true,
        //        confirmButtonColor: "#dd4b39",
        //        confirmButtonText: "是的，删除!",
        //        cancelButtonText: "取消",

        //    }).then(function () {
        //        $.ajax({
        //            type: 'POST',
        //            url: '/CourseOrder/Delete?id=' + id,
        //            success: function (data) {
        //                if (data.success) {
        //                    ShowMessage(data.message, function () { window.location.reload(); });

        //                } else {
        //                    ShowMessageError(data.message);
        //                }
        //            }
        //        });
        //    });
        //}

          function showDetail(id) {
              var url = "/Booking/Detail/" + id;
              window.open(url);
        }

        
        function saveEvaluation() {
            var teachPlanId = $('#TeachPlanId').val();
            var content = $('#Content').val();
            var point = $('#range_15').val();
            var id = $('#Id').val();
           // var data = new teachingEvaluationViewModel(teachPlanId, content, point, id);
            var data = { teachPlanId, content, point, id };
            $.ajax({
                type: 'POST',
                url: '/Order/AddTeachingEvaluation',
                data: data,
                success: function (data) {
                    if (data.success) {
                        popup.modal('hide');
                        ShowMessage("感谢评价");
                    }
                }
            });
        }
</script>
}